<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI，一个简单灵活的前端框架。">
<meta name="author" content="Zentao">
<title>ZUI - 数据表格例子</title>
<link href="../../dist/css/zui.css" rel="stylesheet">
<link href="../../dist/lib/datagrid/zui.datagrid.css" rel="stylesheet">
</head>

<body style="padding: 20px">
  <div id="dataGrid2" class="datagrid hidden">
    <header>
      <div class="input-control search-box search-box-circle has-icon-left has-icon-right pull-right" id="searchboxExample">
        <input id="inputSearchExample1" type="search" class="form-control search-input" placeholder="搜索">
        <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
      </div>
      <h1>数据表格功能综合演示</h1>
    </header>
    <div class="datagrid-container"></div>
    <div class="pager"></div>
  </div>
  <div id="dataGrid" class="datagrid">
    <header>
      <h1>远程请求数据示例</h1>
      <p class="small">全新的数据表格视图组件可以流畅显示上亿的动态数据，完整功能包括自动分页、搜索、远程数据加载、行选择、跨行跨列、行列固定、排序等。此组件将于ZUI 1.8中发布。</p>
    </header>
  </div>
  <div id="remoteDataGridExample" class="datagrid"></div>

<script src="../../assets/jquery.js"></script>
<script src="../../dist/js/zui.js"></script>
<script src="../../dist/lib/selectable/zui.selectable.js"></script>
<script src="../../dist/lib/datagrid/zui.datagrid.js"></script>
<script>
$(function() {
    // Returns a random integer between min (included) and max (included)
    var getRandomInt = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };
    var getRandomData = function(arr, start, end) {
        if (start === undefined) {
            start = 0;
        }
        if (end === undefined) {
            end = arr.length;
        }
        return arr[getRandomInt(start, end - 1)];
    };
    var getLuckInt = window.getLuckInt = function(min, max, luck) {
        return (luck % (max - min) + min);
    };
    var getLuckData = window.getLuckData = function(arr, start, end, luck) {
        if (start === undefined || start === null) {
            start = 0;
        }
        if (end === undefined || end === null) {
            end = arr.length;
        }
        return arr[getLuckInt(start, end - 1, luck)];
    };
    var nowTime = new Date().getTime();
    var createDataSample = function(size) {
        size = size || 100;
        var heros = ['力丸', '幻影刺客', '祈求者', '斧王', '巫医', '天辉防御塔', 'Roshan', '嗜血狂魔', '宙斯', '影魔', '米波', '树精卫士'];
        var actions = ['击杀', '拾取', '购买', '治疗'];
        var items = ['圣剑', '虚灵之刃', '真视宝石', '恐鳌之心', '远行鞋', '治疗指环', '黑皇杖', '刷新球', '金箍棒', '蝴蝶', '诡计之雾', '显影之尘', '侦查守卫', '岗哨守卫', '漩涡', '天堂之戟', '刃甲', '希瓦的守护', '强袭胸甲', '阿托斯之棍', '银月之晶', '斯嘉蒂之眼', '玲珑心', '撒旦之邪力', '否决挂饰', '隐刀', '血棘', '邪恶镰刀', '白银之锋', '辉耀', '代达罗斯之殇', '幻影斧', '林肯法球', '阿哈利姆神杖', '死灵书'];
        var runes = ['赏金神符', '双倍神符', '魔法神符', '极速神符', '不朽之守护', '奶酪'];
        var cols = [
            {label: '时间', name: 'time', width: 130, valueType: 'gametime', sort: true},
            {label: '英雄', name: 'hero', width: 80},
            {label: '动作', name: 'action', width: 60},
            {label: '队友', name: 'teammate', width: 80},
            {label: '敌人', name: 'enemy', width: 80},
            {label: 'date', name: 'date', width: 100, valueType: 'date'},
            {label: '物品/神符', name: 'item', width: 80},
            {label: '获得经验', name: 'gotexps', width: 80, valueType: 'number'},
            {label: '获得金钱', name: 'gotgolds', width: 80, valueType: 'number'},
            {label: '累计经验', name: 'exps', width: 80, valueType: 'number'},
            {label: '剩余金钱', name: 'golds', width: 80, valueType: 'number'},
            {label: '描述', name: 'desc', width: 'auto', minWidth: 200},
            {label: '累计人头', name: 'kills', width: 110, valueType: 'number', valueOperator: {getter: function(value, cell, dg) {
                return '[' + value + ']';
            }}},
        ];

        var createDataItem = function(index) {
            var luckNumber = parseInt((Math.sin(index + 1) + '').substr(3));
            var time = 600 + 5*index + getLuckInt(0, 5, luckNumber);
            var action = getLuckData(actions, null, null, luckNumber);
            var heroIndex = getLuckInt(0, action === '击杀' ? 6 : 4, luckNumber);
            var hero = heros[heroIndex];
            var teammate, enemy, item;
            var heroData = {
                golds: heroIndex*500*heroIndex + 71*index + getLuckInt(0, 71, luckNumber),
                exps: heroIndex*300*heroIndex + 43*index + getLuckInt(0, 43, luckNumber),
                kills: heroIndex + Math.floor(index/10)
            };
            var gotExps = 0;
            var gotGolds = 0;
            switch (action) {
                case '击杀':
                    enemy = getLuckData(heros, 6, 9, luckNumber);
                    gotExps += getLuckInt(0, 1000 + index * 10, luckNumber);
                    gotGolds += getLuckInt(0, 200 + index * 8, luckNumber);
                    if (hero === '力丸') {
                        action = '偷摸';
                    } else if (hero === '斧王') {
                        action = '斩杀';
                    }
                    break;
                case '购买':
                    item = getLuckData(items, null, null, luckNumber);
                    break;
                case '拾取':
                    item = getLuckData(runes, null, null, luckNumber);
                    if (item === '赏金神符') {
                        gotExps += getLuckInt(0, 50 + index, luckNumber);
                        gotGolds += getLuckInt(0, 50 + index * 2, luckNumber);
                    }
                    break;
                case '治疗':
                    teammate = getLuckData(heros, 0, 4, luckNumber);
                    if (hero === '巫医') {
                        action = '奶';
                    }
                    break;
            }
            heroData.golds += gotGolds;
            heroData.exps += gotExps;
            var desc = hero + action + '了“' + (item || teammate || enemy) + '”';
            if (gotGolds) {
                desc += '，获得了金钱 ' + gotGolds;
            }
            if (gotExps) {
                desc += '，' + (gotGolds ? '并' : '') + '获得了经验 ' + gotExps;
            }
            desc += '。';
            var dataItem = {
                id: time,
                time: time,
                hero: hero,
                action: action,
                teammate: teammate || '',
                enemy: enemy || '',
                item: item || '',
                gotgolds: gotGolds || '',
                gotexps: gotExps || '',
                exps: heroData.exps,
                golds: heroData.golds,
                kills: heroData.kills,
                desc: desc,
                date: nowTime + time*1000
            };
            return dataItem;
        };

        return {
            dataSource: {
                cols: cols,
                length: size,
                getByIndex: createDataItem
            },
            valueOperator: {
                gametime: {
                    getter: function(time) {
                        var hours = Math.floor(time/3600);
                        if (hours < 10) {
                            hours = '0' + hours;
                        }
                        var mins = Math.floor(time/60)%60;
                        if (mins < 10) {
                            mins = '0' + mins;
                        }
                        var secs = time%60;
                        if (secs < 10) {
                            secs = '0' + secs;
                        }
                        return hours + ':' + mins + ':' + secs;
                    }
                }
            },
            generate: function (size) {
                var result = [];
                for(var i = 0; i < size; ++i) {
                    result.push(createDataItem(i));
                }
                return result;
            }
        };
    };
    var sampleSize = 10000000000000;
    var sampleData = createDataSample(sampleSize);

    // var options1 = $.extend(sampleData, {
    //     borderWidth: 1,
    //     height: 500,
    //     defaultDateFormater: 'hh:mm:ss',
    //     states: {
    //         fixedTopUntil: 0,
    //         fixedBottomFrom: sampleSize,
    //         fixedRightFrom: 12,
    //         pager: {page: 0}
    //     },
    //     configs: {
    //         'C1': {
    //           style: {textAlign: 'right'}
    //         },
    //         'C2': {
    //           style: {fontWeight: 'bold'}
    //         }
    //     },
    //     renderDelay: 200,
    //     // checkable: true,
    //     sortable: false,
    //     // rowDefaultHeight: 50,
    // });
    // var staticDataSource = {
    //     cols: sampleData.dataSource.cols,
    //     data: sampleData.generate(10),
    //     cache: true,
    // };
    // var options2 = {
    //     configs: {
    //         'R0C0': {
    //           label: '#'
    //         },
    //         'C1': {
    //           style: {textAlign: 'right'}
    //         },
    //         'C2': {
    //           style: {fontWeight: 'bold'}
    //         },
    //     },
    //     dataSource: staticDataSource,
    //     valueOperator: sampleData.valueOperator,
    //     states: {
    //         pager: {page: 1, recPerPage: 12},
    //     },
    //     height: 300,
    //     renderDelay: 200,
    //     checkable: true,
    //     checkByClickRow: false,
    // };
    // var datagrid = $('#dataGrid2').datagrid(options2).data('zui.datagrid');
    // console.log('datagrid2', datagrid);
    // window.staticDataSource = staticDataSource;
    // window.datagrid = datagrid;

    var options3 = {
        height: 'page',
        states: {
            pager: {page: 1, recPerPage: 5},
            search: 'etst'
        },
        dataSource: {
            cols:[
                {name: 'time', label: '时间', width: 132},
                {name: 'hero', label: '英雄', width: 134},
                {name: 'action', label: '动作', width: 109},
                {name: 'target', label: '目标', width: 109},
                {name: 'desc', label: '描述', width: 287}
            ],
            remote: function(params) {
                return {
                    // 原创请求地址
                    url: '../../docs/partial/remote-data-' + params.page + '.json',
                    // 请求类型
                    type: 'GET',
                    // 数据类型
                    dataType: 'json'
                };
            }
        }
    };

    // var datagrid2 = $('#dataGrid2').datagrid(options2).data('zui.datagrid');
    // console.log('datagrid2', datagrid2);

    var datagrid3 = $('#remoteDataGridExample').datagrid({
        states: {
            pager: {page: 1, recPerPage: 5},
        },
        dataSource: {
            cols:[
                {name: 'time', label: '时间', width: 132},
                {name: 'hero', label: '英雄', width: 134},
                {name: 'action', label: '动作', width: 109},
                {name: 'target', label: '目标', width: 109},
                {name: 'desc', label: '描述', width: 287}
            ],
            remote: function(params) {
                return {
                    // 原创请求地址
                    url: '../partial/remote-data-' + params.page + '.json',
                    // 请求类型
                    type: 'GET',
                    // 数据类型
                    dataType: 'json'
                };
            },
            remoteConverter: function(data) {
                return data;
            }
        }
    }).data('zui.datagrid');
    console.log('datagrid3', datagrid3);
});
</script>
</body>
</html>
